import Taro, { Component } from "@tarojs/taro";
import { View, Button, Text, Image, Picker } from "@tarojs/components";
import { connect } from "@tarojs/redux";
import { uploadJSON } from "../../service/request";
import { setUserInfo, getUserInfo } from "../../actions/account";
import { AtActionSheet, AtActionSheetItem, AtInput, AtButton } from "taro-ui";
import Head from '../../components/head'
import "./info.less";

@connect(
  ({ account, appconfig }) => ({
    ...account,
    ...appconfig
  }),
  dispatch => ({
    async getUserInfo() {
      dispatch(await getUserInfo());
    }
  })
)
class Info extends Component {
  config = {
    navigationBarTitleText: "个人信息"
  };

  state = {
    avatar: "",
    userName: "",
    userIcon: "",
    userBorn: "",
    selector: ["女", "男"],
    userSex: 0,
    isOpened: false
  };

  componentWillMount() {
    const { icon,name,sex,born } = this.props
    this.setState({
      userName: name,
      userIcon: icon,
      userSex: sex,
      userBorn:born
    })
  }

  onChange = e => {
    this.setState({
      userSex: e.detail.value
    });
  };

  onTimeChange = e => {
    this.setState({
      timeSel: e.detail.value
    });
  };
  onDateChange = e => {
    // console.log(e)
    // let bornDate = new Date(e.detail.value);
    // console.log(typeof bornDate)
    // let year = bornDate.getFullYear();
    // let month = "";
    // let date = bornDate.getDate();
    // if (bornDate.getMonth() + 1 < 10) {
    //   month = "0" + (bornDate.getMonth() + 1);
    // }
    // if (date < 10) {
    //   date = "0" + date;
    // }
    // let real_date = year + "-" + month + "-" + date;
    let bornDate = e.detail.value.split('-')
    let year = bornDate[0]
    let month = bornDate[1];
    let date = bornDate[2];
    if (parseInt(month) < 10) {
      month = '0' + month;
    }
    if (parseInt(date) < 10) {
      date = '0' + date;
    }
    const real_date = year + '-' + month +'-' + date
    this.setState({
      userBorn:real_date
    });
  };

  changeFile(e) {

    const file = e.target.files[0];
    const form = new FormData();
    form.append("file", file);
    uploadJSON(form).then(result => {
      const { data } = result;
      if (data.state === "000") {
        this.setState({
          userIcon: data.data
        });
      } else {
        Taro.showToast({
          title: data.msg,
          icon: "none"
        });
      }
    });
  }

  saveUserInfo() {
    const {
      userName: name,
      userSex: sex,
      userIcon: icon,
      userBorn: born
    } = this.state;
    setUserInfo({ name, sex, icon, born }).then(result => {
      if (result) {
        Taro.showToast({
          title: '保存成功',
          icon: 'success',
          duration:2000
        })
       this.props.getUserInfo();
      }
    });
  }

  render() {
    const fileClass = {
      width: "66px",
      filter: "alpha(opacity=0)",
      opacity: 0,
      position: "absolute",
      cursor: "pointer",
      right: "20px",
      top: "80px"
    };
    const changBtn = {
      width: "80px",
      height: "50px",
      backgroundColor: "#409EFF",
      color: "#FFFFFF",
      fontSize: "16px",
      fontWeight: "bold",
      display: "flex",
      flexDirection: "row",
      justifyContent: "center",
      alignItems: "center",
      borderRadius: "5px"
    };
    const {
      isOpened,
      selector,
      userIcon,
      userName,
      userBorn,
      userSex
    } = this.state;
    const { name, sex, born, staticUri } = this.props;
    return (
      <View className="info-index">
        <Head title="我的客户" urlPath={'/pages/mine/index'} />
        {/* <View className="info-head">
          <Image
            className="info-back-page"
            onClick={() => {
              Taro.navigateBack();
            }}
            src={require("../../assets/img/back.png")}
          />
          <Text className="info-title">我的客户</Text>
        </View> */}
        <View className="info-body">
          <View className="user-info">
            <View className="info-list">
              <View className="at-row">
                <View className="at-col at-col-9">
                  <Text style="font-size:14PX;color:#4A4A4A">头像</Text>
                </View>
                <View className="at-col at-col-2" style="text-align:right">
                  <Image
                    style="width:32PX;height:32PX;border-radius:50%;"
                    src={
                      userIcon
                        ? staticUri + userIcon
                        : require("../../assets/img/avatar_blank.png")
                    }
                  />
                </View>

                <View className="at-col at-col-1" style="text-align:right">
                  <Image
                    style="width:7px;height:12px;"
                    src={require("../../assets/img/arrow.png")}
                  />
                  <input
                    id="file"
                    name="file"
                    type="file"
                    accept="image/*"
                    style={fileClass}
                    onChange={this.changeFile.bind(this)}
                  />
                </View>
              </View>
            </View>

            <View className="info-list">
              <View className="at-row">
                <View className="at-col at-col-9">
                  <Text style="font-size:14PX;color:#4A4A4A">姓名</Text>
                </View>
                <View className="at-col at-col-2" style="text-align:right">
                  <Text style="font-size:14PX;color:#999999">
                    {userName ? userName : "待完善"}
                  </Text>
                </View>
                <View
                  className="at-col at-col-1"
                  style="text-align:right"
                  onClick={() => {
                    this.setState({
                      isOpened: true
                    });
                  }}
                >
                  <Image
                    style="width:7px;height:12px;"
                    src={require("../../assets/img/arrow.png")}
                  />
                </View>
              </View>
            </View>
            <AtActionSheet isOpened={isOpened}>
              <AtActionSheetItem>
                <AtInput
                  name="userName"
                  type="text"
                  placeholder="请输入真实姓名"
                  maxLength="4"
                  value={userName}
                  onChange={value => {
                    this.setState({
                      userName: value
                    });
                  }}
                >
                  <View
                    style={changBtn}
                    onClick={() => {
                      this.setState({
                        isOpened: false
                      });
                    }}
                  >
                    确定
                  </View>
                </AtInput>
              </AtActionSheetItem>
            </AtActionSheet>
            <Picker mode="selector" range={selector} onChange={this.onChange}>
              <View className="info-list">
                <View className="at-row">
                  <View className="at-col at-col-9">
                    <Text style="font-size:14PX;color:#4A4A4A">性别</Text>
                  </View>
                  <View className="at-col at-col-2" style="text-align:right">
                    <Text style="font-size:14PX;color:#999999">
                      {selector[userSex]}
                    </Text>
                  </View>
                  <View className="at-col at-col-1" style="text-align:right">
                    <Image
                      style="width:7px;height:12px;"
                      src={require("../../assets/img/arrow.png")}
                    />
                  </View>
                </View>
              </View>
            </Picker>
            <Picker mode="date" onChange={this.onDateChange}>
              <View className="info-list">
                <View className="at-row">
                  <View className="at-col at-col-8">
                    <Text style="font-size:14PX;color:#4A4A4A">生日</Text>
                  </View>
                  <View className="at-col at-col-3" style="text-align:right">
                    <Text style="font-size:14PX;color:#999999">
                      {userBorn !== null ? userBorn.substring(0,10) : '1990-01-01' }
                    </Text>
                  </View>
                  <View className="at-col at-col-1" style="text-align:right">
                    <Image
                      style="width:7px;height:12px;"
                      src={require("../../assets/img/arrow.png")}
                    />
                  </View>
                </View>
              </View>
            </Picker>
          </View>
        </View>
        <View className="save-btn">
          <Button className="total-btn" onClick={this.saveUserInfo.bind(this)}>
            保存
          </Button>
        </View>
      </View>
    );
  }
}
export default Info;
